<template>
	<view class=" ac-page">
		<view class="for-goods flex">
			<view class="goods-icon-area colCenter">
				<view class="goods-icon item-img"></view>
				房源增额
			</view>
			<view class="good">
				<div class="top-bg-number">+20</div>
				<view class="ccbg flex">
					￥<view class="bg-number">100</view>元/年
				</view>
			</view>
			<view class="good">
				<div class="top-bg-number">+40</div>
				<view class="ccbg flex">
					￥<view class="bg-number">100</view>元/年
				</view>
			</view>
			<view class="good">
				<div class="top-bg-number">+60</div>
				<view class="ccbg flex">
					￥<view class="bg-number">100</view>元/年
				</view>
			</view>
		</view>
		<view class="title"> 交易明细 </view> 
		<scroll-view class="main" scroll-y="true" scroll-with-animation="true" @scrolltolower="handleScrollEnd">
			<view class="item line" v-for="(e,index) in list " :key="index">
				<u-avatar slot="icon" shape="square" size="35" src="https://cdn.uviewui.com/uview/album/1.jpg"
					customStyle="margin: -3px 5px -3px 0"></u-avatar>
				<div class="infos flex1">
					<div class="name"> 小米</div>
					<div class="time cc"> {{ '2020/11/11' ||e.createTime }} </div>
					<div class="tip"> {{ '2020/11/11' ||e.createTime }} </div>
				</div>
		 	<div :class="e.transactionStatus == 1 ? 'number plus':'number'">
					{{ e.transactionStatus ==1?"+":"-" }} {{e.money}}
				</div>
			</view>
		</scroll-view> 
	</view>
</template>


<script>
	/*
	https://uniapp.dcloud.io/component/scroll-view.html
	https://www.cnblogs.com/mrcui/p/15822821.html
	*/
	export default {
		data() {
			return {
				list: [],
				loadding:false,
			}
		},
		created() {
		  this.load([])	
		}, 
		methods: { 
			async load(arr){
			   	this.loadding = true;
				var res = await this.ajax('/wx/transactionDetail/list')
				console.log("查询交易列表", res);
				this.list = arr.concat(res.rows)
				this.loadding = false;
			},
			handleScrollEnd(e){
				console.log(e);
				if(this.loadding) return;
				this.pageNum =  this.pageNum + 1
				this.load(this.list)
			},
		},
	}
</script>

<style lang="scss">
	.ac-page {
		 padding: 10px 0;
		 .for-goods{
			 padding: 10px 10px 10px 0;
			 background-color: #FBD100;
			 font-size: 12px;
			 color: #fff;
		 }
		 .goods-icon-area{
		   background: #FFF;
		   color: #FBD100;
		   padding:4px 10px;
		 }
		 .goods-icon{
			 width: 50px;
			 height: 50px;
		 }
		 .good{
		   text-algin:center;
		   margin:5px;
		 }
		 .top-bg-number{
			 font-size:18px;
			 font-weight: 600;
			 color:#DCDDDD;
			background: #FFF;
			padding: 2px 5px;
		 }
		 .bg-number{
		   font-size:18px;
		   font-weight: 600;
		   color:#fff;
		   
		 }
		 .ccbg{
		   background: #ccc;
		   padding:2px 4px;  
		 }

		.list {
			.item {
				padding: 10px;
				border-bottom: 1px solid #ccc;

				.infos {
					padding-left: 10px;
				}

				.number {
					font-size: 14px;
					font-weight: 600;
					color: #ccc;
				}

				.plus {
					color: #ECD72D;
				}
			}
		}

	}
</style>
